<template>
    <el-dialog @close="cancleAddDict" v-model="dialogVisible" width="30%" title="添加检测模板-产品" destroy-on-close center>
        <template #default>
            <el-form :model="productMaterial" label-position="right" label-width="110px">

              <el-form-item label="*产品物料编码">
                <el-input  v-model="productMaterial.materialProductId" placeholder="请输入产品物料编码" />
              </el-form-item>

                <el-form-item label="*产品物料名称">
                  <el-inputnp
                      v-model="productMaterial.materialProductName"
                      style="max-width: 600px"
                      placeholder="请输入产品物料名称"
                  >
                    <template #append>
                      <el-button icon="el-icon-search" @click="findcheckItem"></el-button>
                    </template>
                  </el-inputnp>
                </el-form-item>

                <el-form-item label="规格型号">
                    <el-input  type="textarea" v-model="productMaterial.types" placeholder="请输入规格型号" />
                </el-form-item>

              <el-form-item label="最低检测数">
                <el-input-number v-model="productMaterial.underCheck" :min="1" :max="100"  @change="handleChangeUpundercheck" />
              </el-form-item>

              <el-form-item label="最大不合格数">
                <el-input-number v-model="productMaterial.maxNoQualified" :min="0" :max="100"  @change="handleChangeUpMaxUnpass" />
              </el-form-item>


              <el-form-item label="单位">
                <el-select  v-model="productMaterial.unit"  >
                  <el-option v-for="item in types" :key="item.unit" :label="item.unit" :value="item.unit" />
                </el-select>
              </el-form-item>

              <el-form-item label="最大致命缺陷率">
                  <el-input-number v-model="productMaterial.maxFatalDefect" :min="0" :max="100"  @change="handleChangeUpMaxFateFlaw" />
              </el-form-item>

              <el-form-item label="最大严重缺陷率">
                  <el-input-number v-model="productMaterial.maxSeriousDefect" :min="0" :max="100"  @change="handleChangeSeriousDefect" />
              </el-form-item>

              <el-form-item label="最大轻微缺陷率">
                <el-input-number v-model="productMaterial.maxLittleFlaw" :min="0" :max="100"  @change="handleChangeLittleFlaw" />
              </el-form-item>


              <el-form-item label="备注">
                <el-input type="textarea" v-model="productMaterial.note" placeholder="请输入内容" />
              </el-form-item>

            </el-form>
        </template>
        <!-- footer插槽中放两个按钮 -->
        <template #footer>
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" @click="addDict">确定</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" @click="cancleAddDict">取消</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>
<script>
import { watch } from "vue";
// 引入我们申明的productMaterial的api的js
import MaterialProductRequest from "@/api/materialproduct.js";
import axios from 'axios';
export default {
  // components:{
  //   MyComponent,
  // },
    props: ["visible","templateId"],
    emits: ["optionCompleted"], // 对外暴露一个事件，用来传递添加学生的操作结果
    data() {
        return {
            num:0,
            productMaterial: {
              materialProductId:undefined,
              materialProductName:undefined,
              types:undefined,
              underCheck:0,
              unit:undefined,
              maxNoQualified:0,
              maxFatalDefect:0,
              maxSeriousDefect:0,
              maxLittleFlaw:0,
              templateId:undefined,
              productStatus:0,
              status:0
            },// 绑定新增的字典信息
            dialogVisible: false,// 添加字典窗口的显示与隐藏
            types:{},
            isAutoGenerate:false,
            up:0,
            down:0,

          CHECK_No:'CHECK_NO',
        }
    },
     methods: {
       /**
        * 加载检测项所有信息
        */
       loadProductAll(){

         MaterialProductRequest.loadMaterialProductAll(res => {
           const types = res.data.map(item => {
             return {
              unit: item.unit,
             }
           })
           let seen = {};
           let filteredArr = types.filter(item => {
             let key = item.unit ;
             if (!seen[key]) {
               seen[key] = true;
               return true;
             }
             return false;
           });
           this.types = filteredArr;
           console.log(this.types);
         })
       },

       /**
        * 最大检测数
        */
       handleChangeUpundercheck(value){
         this.productMaterial.minChecks = value;
       },

       /**
        * 最大不合格数
        */
       handleChangeUpMaxUnpass(value){
         this.productMaterial.maxNoQualified = value;
       },
       /**
        * 最大致命缺陷
        */
       handleChangeUpMaxFateFlaw(value){
           this.productMaterial.maxFatalDefect = value;
       },
       /**
        * 最大严重缺陷
        */
       handleChangeSeriousDefect(value){
         this.productMaterial.maxSeriousDefect = value;
       },

       /**
        * 最小缺陷数
        */
       handleChangeLittleFlaw(value){
         this.productMaterial.maxLittleFlaw = value;
       },

       /**
        * 检测项中选择检测项
        */
       findcheckItem(){

       },
        /**
         * 取消添加学生的事件
         */
        cancleAddDict(){
            this.productMaterial = {};
            // 通知父组件  操作完成，让父组件关闭窗体
            this.$emit("optionCompleted");
        },
        /**
         * 添加信息
         */
        addDict(){
          this.productMaterial.templateId = this.templateId;
            console.log(this.productMaterial),
            MaterialProductRequest.addMaterialProduct(this.productMaterial,res=>{
                if (res.code == '200'){
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    // 通知父组件  操作完成，让父组件关闭窗体
                    this.$emit("optionCompleted");
                }else if(res.code == '300'){
                    this.$message({
                        type: 'warning',
                        message: '字典' + (res.msg.indexOf("checkItemName") > 0 ?"名称":"类型") + "重复"
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: '添加字典失败!'
                    });
                }
            });
        },


  }, mounted(props) {
    this.loadProductAll();
        // 侦听props   一旦发生变化，就会出发下面的函数
        watch(() => this.visible, (newVal, oldVal) => {
            // 将最新的值设置给弹窗的dialogVisible属性
            this.dialogVisible = newVal;
        });
    }
}
</script>